<template>
	<view class="" :style="{'height':props.height+'rpx'}"></view>
	<view class="fixed-bottom-box" :style="{
		'height':props.height+'rpx',
		'bottom':props.bottom+'rpx'
	}">
		<view class="w-100 fixed-border"></view>
		<slot name="default"></slot>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		watch,
		getCurrentInstance
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		useColorStore
	} from '@/store/color'
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	const props = defineProps({
		height:{
			default: 140
		},
		bottom:{
			default: 0
		}
	})
	
	onMounted(()=>{
		
	})
	
</script>

<style lang="scss">
	.fixed-bottom-box{
		height: 150rpx;
		position: fixed;
		bottom: 0;
		box-sizing: border-box;
		background-color: #fff ;
		z-index: 999;
		background: linear-gradient(to bottom, #17404D 0%, #001524 100%);
	}
	
	@media screen and (min-width:960px){
		.fixed-bottom-box{
			left: 50%;
			width: calc(750rpx);
			transform: translateX(-50%);
		}
	}
	@media screen and (max-width:960px){
		.fixed-bottom-box{
			left: 0;
			width: calc(100vw);
		}
	}
	
	.fixed-border{
		position: absolute;
		top: 0;
		left: 0;
		height: 2px;
		background: linear-gradient(to right, #184250 0%, #4EB5C8 25% , #E4FBFF 50% , #4EB5C8 75% , #184250 100%);
	}
</style>